<template>
  <div>
    <a-form
      ref="formRef"
      name="advanced_search"
      :model="formState"
      @finish="onFinish"
    >
      <a-row :gutter="24" justify="space-between">
        <template v-for="i in formCount" :key="i">
          <a-col v-show="expand || i <= count" :span="8">
            <a-form-item :name="`field-${i}`" :label="`字段${i}`">
              <a-input
                v-model:value="formState[`field-${String(i)}` as keyof typeof formState]"
                placeholder="请输入"
              ></a-input>
            </a-form-item>
          </a-col>
        </template>
      </a-row>
      <a-row>
        <a-col :span="24" style="text-align: right">
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button style="margin: 0 8px" @click="() => formRef!.resetFields()"
            >重置</a-button
          >
          <a style="font-size: 12px" @click="expand = !expand">
            <template v-if="expand">
              <UpOutlined />
              关闭
            </template>
            <template v-else>
              <DownOutlined />
              打开
            </template>
          </a>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, defineExpose } from "vue";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";
import { FormInstance, message } from "ant-design-vue";
import ARow from "ant-design-vue/lib/grid/Row";
interface IProps {
  [key: string]: unknown;
}
export default defineComponent({
  components: {
    DownOutlined,
    UpOutlined,
  },
  props: {
    formCount: {
      type: Number,
      default: 9,
    },
  },
  setup(props: IProps) {
    const expand = ref(false);
    const formRef = ref<FormInstance>();
    const formState = reactive({});
    const formCount = ref(props.formCount);
    const count = ref(3); // 显示输入框个数
    const onFinish = (values: any) => {};
    const changeCount = (c: number) => {
      count.value = c;
    };
    return {
      formRef,
      formState,
      expand,
      formCount,
      count,

      onFinish,
      changeCount,
    };
  },
});
</script>
<style lang="less" rel="stylesheet/less" scoped>
.com-advance-container {
  width: 100%;
}
</style>
